<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>统计</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet"/>
    <style>
        .boostrap_sm_zdy{
            padding-left: 5px;
            padding-right: 5px;
        }
        .boostrap_sm_zdy_none{
            padding-left: 0px;
            padding-right: 0px;
        }
        .boostrap_bg_parmary{
            display: inline-block;
            width: 100%;
            height: 60px;
            line-height: 60px;
            text-align: center;
            border-radius: 2px;
            font-size: 30px;
            background-color: #F8F8F8;
            color: #333;
            transition: all .3s;
            -webkit-transition: all .3s;
        }
        .boostrap_bg_parmary1{
            background-color: #F8F8F8;
        }
        li{
            list-style-type:none;
            text-align: center;
        }
        .col-xs-4{
            width: 33.33%;
        }
        .layui-col-space10{
            padding:5px;
        }
        .li_a_cite li ci{
            position: relative;
            top: 2px;
            display: block;
            color: #666;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            font-size: 14px;
        }
        .col-xs-6{
            width: 50%;
            height: 93px;
        }
        .back_log_body{
            display: block;
            padding: 10px 15px;
            color: #999;
            border-radius: 2px;
            transition: all .3s;
        }
        .back_log_body h3{
            padding-bottom: 10px;
            font-size: 12px;
        }
        cite{
            font-style: normal;
            font-size: 30px;
            font-weight: 300;
            color: #009688;
        }
    </style>
</head>
<body class="gray-bg">
<!--<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-sm-8 boostrap_sm_zdy_none">
            <div class="col-sm-6 boostrap_sm_zdy">
                <div class="ibox float-e-margins" style="margin-top: 0px">
                    <div class="ibox-title">
                        <h5>快捷方式</h5>
                    </div>
                    <div class="ibox-content" style="position:relative;line-height: 24px;padding: 10px 15px">
                        <div class="carousel" style="width:100%;height: 185px!important;position:relative;left: 0px;top: 0px">
                            <div style="height: 100%;width: 100%;position:relative" class="li_a_cite">
                                <ul class="layui-row layui-col-space10 layui-this ">
                                    <li class="col-xs-4">
                                        <a href="javascript:;" onclick="">
                                            <span class="glyphicon glyphicon-list-alt boostrap_bg_parmary"></span>
                                            <ci>产品知识新增</ci>
                                        </a>
                                    </li>
                                    <li class="col-xs-4">
                                        <a href="javascript:;" onclick="">
                                            <span class="glyphicon glyphicon-pencil boostrap_bg_parmary"></span>
                                            <ci>产品标识维护</ci>
                                        </a>
                                    </li>
                                    <li class="col-xs-4">
                                        <a href="javascript:;" onclick="">
                                            <span class="glyphicon glyphicon-time boostrap_bg_parmary"></span>
                                            <ci>标识变更记录</ci>
                                        </a>
                                    </li>
                                    <li class="col-xs-4">
                                        <a href="javascript:;" onclick="">
                                            <span class="glyphicon glyphicon-plus boostrap_bg_parmary"></span>
                                            <ci>注册/备案新增</ci>
                                        </a>
                                    </li>
                                    <li class="col-xs-4">
                                        <a href="javascript:;" onclick="">
                                            <span class="glyphicon glyphicon-edit boostrap_bg_parmary"></span>
                                            <ci>注册/备案维护</ci>
                                        </a>
                                    </li>
                                    <li class="col-xs-4">
                                        <a href="javascript:;" onclick="">
                                            <span class="glyphicon glyphicon-share boostrap_bg_parmary"></span>
                                            <ci>注册/备案变更</ci>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 boostrap_sm_zdy">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>数据概述</h5>
                    </div>
                    <div class="ibox-content"style="position:relative;line-height: 24px;padding: 10px 15px">
                        <div class="carousel" style="width:100%;height: 185px !important;position:relative;left: 0px;top: 0px">
                            <div style="height: 100%;width: 100%;position:relative">
                                <ul class="layui-row layui-col-space10 layui-this">
                                    <li class="col-xs-6">
                                        <a href="javascript:;" class="back_log_body boostrap_bg_parmary1">
                                            <h3>申报总数</h3>
                                            <p>
                                                <cite>0</cite>
                                            </p>
                                        </a>
                                    </li>
                                    <li class="col-xs-6">
                                        <a href="javascript:;" class="back_log_body boostrap_bg_parmary1">
                                            <h3>公示总数</h3>
                                            <p>
                                                <cite>0</cite>
                                            </p>
                                        </a>
                                    </li>
                                    <li class="col-xs-6">
                                        <a href="javascript:;" class="back_log_body boostrap_bg_parmary1">
                                            <h3>提交待公示总数</h3>
                                            <p>
                                                <cite>0</cite>
                                            </p>
                                        </a>
                                    </li>
                                    <li class="col-xs-6">
                                        <a href="javascript:;" class="back_log_body boostrap_bg_parmary1">
                                            <h3>草稿总数</h3>
                                            <p>
                                                <cite>0</cite>
                                            </p>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-12 boostrap_sm_zdy">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>数据申报走势</h5>
                        <div class="pull-right">
                            <div class="btn-group">
                                <button class="btn btn-xs btn-white active">最近一周</button>
                                <button class="btn btn-xs btn-white">最近一月</button>
                                <button class="btn btn-xs btn-white">最近一年</button>
                            </div>
                        </div>
                    </div>
                    <div class="ibox-content">
                        2
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-4 boostrap_sm_zdy_none">
            <div class="col-sm-12 boostrap_sm_zdy">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>最新公告</h5>
                    </div>
                    <div class="ibox-content">
                        2
                    </div>
                </div>
            </div>
            <div class="col-sm-12 boostrap_sm_zdy">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>器械分类占比情况</h5>
                    </div>
                    <div class="ibox-content">
                        2
                    </div>
                </div>
            </div>
            <div class="col-sm-12 boostrap_sm_zdy">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>产品分类占比情况</h5>
                    </div>
                    <div class="ibox-content">
                        2
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>-->


    <div class="wrapper wrapper-content">
        <div class="row">
            <div class="col-sm-4">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-success pull-right">月</span>
                        <h5>收入</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins">40 886,200</h1>
                        <div class="stat-percent font-bold text-success">98% <i class="fa fa-bolt"></i>
                        </div>
                        <small>总收入</small>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-info pull-right">全年</span>
                        <h5>订单</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins">275,800</h1>
                        <div class="stat-percent font-bold text-info">20% <i class="fa fa-level-up"></i>
                        </div>
                        <small>新订单</small>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-primary pull-right">今天</span>
                        <h5>访客</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins">106,120</h1>
                        <div class="stat-percent font-bold text-navy">44% <i class="fa fa-level-up"></i>
                        </div>
                        <small>新访客</small>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-8">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>订单</h5>
                        <div class="pull-right">
                            <div class="btn-group">
                                <button type="button" class="btn btn-xs btn-white active">天</button>
                                <button type="button" class="btn btn-xs btn-white">月</button>
                                <button type="button" class="btn btn-xs btn-white">年</button>
                            </div>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-sm-9">
                                <div class="flot-chart">
                                    <div class="flot-chart-content" id="flot-dashboard-chart"></div>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <ul class="stat-list">
                                    <li>
                                        <h2 class="no-margins">2,346</h2>
                                        <small>订单总数</small>
                                        <div class="stat-percent">48% <i class="fa fa-level-up text-navy"></i>
                                        </div>
                                        <div class="progress progress-mini">
                                            <div style="width: 48%;" class="progress-bar"></div>
                                        </div>
                                    </li>
                                    <li>
                                        <h2 class="no-margins ">4,422</h2>
                                        <small>最近一个月订单</small>
                                        <div class="stat-percent">60% <i class="fa fa-level-down text-navy"></i>
                                        </div>
                                        <div class="progress progress-mini">
                                            <div style="width: 60%;" class="progress-bar"></div>
                                        </div>
                                    </li>
                                    <li>
                                        <h2 class="no-margins ">9,180</h2>
                                        <small>最近一个月销售额</small>
                                        <div class="stat-percent">22% <i class="fa fa-bolt text-navy"></i>
                                        </div>
                                        <div class="progress progress-mini">
                                            <div style="width: 22%;" class="progress-bar"></div>
                                        </div>
                                    </li>
                                 </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-primary pull-right">今天</span>
                        <h5>访客</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins">106,120</h1>
                        <div class="stat-percent font-bold text-navy">44% <i class="fa fa-level-up"></i>
                        </div>
                        <small>新访客</small>
                    </div>
                </div>
            </div>
        </div>
      </div>
    </div>
<script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script src="../static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
<script src="../static/ajax/libs/flot/jquery.flot.js" th:src="@{/ajax/libs/flot/jquery.flot.js}"></script>
<th:block th:include="include :: sparkline-js" />
<script th:inline="javascript">
    $(function(){
        $(".boostrap_bg_parmary").on({
            mouseenter:function(){
                $(".boostrap_bg_parmary").css("background-color","#f3f3f4")
            },
            mouseleave:function(){
                $(".boostrap_bg_parmary").css("background-color","#F8F8F8")
            }
        })
    })

	    $(document).ready(function () {
	        var data2 = [
	            [gd(2012, 1, 1), 7], [gd(2012, 1, 2), 6], [gd(2012, 1, 3), 4], [gd(2012, 1, 4), 8],
	            [gd(2012, 1, 5), 9], [gd(2012, 1, 6), 7], [gd(2012, 1, 7), 5], [gd(2012, 1, 8), 4],
	            [gd(2012, 1, 9), 7], [gd(2012, 1, 10), 8], [gd(2012, 1, 11), 9], [gd(2012, 1, 12), 6],
	            [gd(2012, 1, 13), 4], [gd(2012, 1, 14), 5], [gd(2012, 1, 15), 11], [gd(2012, 1, 16), 8],
	            [gd(2012, 1, 17), 8], [gd(2012, 1, 18), 11], [gd(2012, 1, 19), 11], [gd(2012, 1, 20), 6],
	            [gd(2012, 1, 21), 6], [gd(2012, 1, 22), 8], [gd(2012, 1, 23), 11], [gd(2012, 1, 24), 13],
	            [gd(2012, 1, 25), 7], [gd(2012, 1, 26), 9], [gd(2012, 1, 27), 9], [gd(2012, 1, 28), 8],
	            [gd(2012, 1, 29), 5], [gd(2012, 1, 30), 8], [gd(2012, 1, 31), 25]
	        ];
	
	        var data3 = [
	            [gd(2012, 1, 1), 800], [gd(2012, 1, 2), 500], [gd(2012, 1, 3), 600], [gd(2012, 1, 4), 700],
	            [gd(2012, 1, 5), 500], [gd(2012, 1, 6), 456], [gd(2012, 1, 7), 800], [gd(2012, 1, 8), 589],
	            [gd(2012, 1, 9), 467], [gd(2012, 1, 10), 876], [gd(2012, 1, 11), 689], [gd(2012, 1, 12), 700],
	            [gd(2012, 1, 13), 500], [gd(2012, 1, 14), 600], [gd(2012, 1, 15), 700], [gd(2012, 1, 16), 786],
	            [gd(2012, 1, 17), 345], [gd(2012, 1, 18), 888], [gd(2012, 1, 19), 888], [gd(2012, 1, 20), 888],
	            [gd(2012, 1, 21), 987], [gd(2012, 1, 22), 444], [gd(2012, 1, 23), 999], [gd(2012, 1, 24), 567],
	            [gd(2012, 1, 25), 786], [gd(2012, 1, 26), 666], [gd(2012, 1, 27), 888], [gd(2012, 1, 28), 900],
	            [gd(2012, 1, 29), 178], [gd(2012, 1, 30), 555], [gd(2012, 1, 31), 993]
	        ];
	
	
	        var dataset = [
	            {
	                label: "订单数",
	                data: data3,
	                color: "#1ab394",
	                bars: {
	                    show: true,
	                    align: "center",
	                    barWidth: 24 * 60 * 60 * 600,
	                    lineWidth: 0
	                }
	
	            }, {
	                label: "付款数",
	                data: data2,
	                yaxis: 2,
	                color: "#464f88",
	                lines: {
	                    lineWidth: 1,
	                    show: true,
	                    fill: true,
	                    fillColor: {
	                        colors: [{
	                            opacity: 0.2
	                        }, {
	                            opacity: 0.2
	                        }]
	                    }
	                },
	                splines: {
	                    show: false,
	                    tension: 0.6,
	                    lineWidth: 1,
	                    fill: 0.1
	                },
	            }
	        ];
	
	
	        var options = {
	            xaxis: {
	                mode: "time",
	                tickSize: [3, "day"],
	                tickLength: 0,
	                axisLabel: "Date",
	                axisLabelUseCanvas: true,
	                axisLabelFontSizePixels: 12,
	                axisLabelFontFamily: 'Arial',
	                axisLabelPadding: 10,
	                color: "#838383"
	            },
	            yaxes: [{
	                    position: "left",
	                    max: 1070,
	                    color: "#838383",
	                    axisLabelUseCanvas: true,
	                    axisLabelFontSizePixels: 12,
	                    axisLabelFontFamily: 'Arial',
	                    axisLabelPadding: 3
	            }, {
	                    position: "right",
	                    clolor: "#838383",
	                    axisLabelUseCanvas: true,
	                    axisLabelFontSizePixels: 12,
	                    axisLabelFontFamily: ' Arial',
	                    axisLabelPadding: 67
	            }
	            ],
	            legend: {
	                noColumns: 1,
	                labelBoxBorderColor: "#000000",
	                position: "nw"
	            },
	            grid: {
	                hoverable: false,
	                borderWidth: 0,
	                color: '#838383'
	            }
	        };
	
	        function gd(year, month, day) {
	            return new Date(year, month - 1, day).getTime();
	        }
	
	        var previousPoint = null,
	            previousLabel = null;
	
	        $.plot($("#flot-dashboard-chart"), dataset, options);
	    });
    </script>
</body>
</html>
